<?php
/* © 2020-2025 ALYR.NET */
// 检查用户登录状态
require_once __DIR__ . '/session_check.php';
smart_auth_check();

// 获取当前用户信息
$currentUser = get_logged_in_user();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片内容审核工具</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="assets/css/styles.css" media="(min-width: 769px)">
<link rel="stylesheet" href="assets/css/mobile.css" media="(max-width: 768px)">
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <div class="header-content">
                    <div class="header-text">
                        <h1>🛡️ 图片内容审核系统</h1>
                        <p>智能识别图片中的敏感内容，避免引起不必要的麻烦！</p>
                    </div>
                    <div class="header-actions">
                        <div class="user-info">
                            <span class="user-name">👤 <?php echo htmlspecialchars($currentUser['user_name']); ?></span>
                            <a href="logout.php" class="logout-btn" title="退出登录">退出</a>
                        </div>
                        <button class="open-new-window-btn" @click="openInNewWindow" title="在新窗口打开">
                            🔗 无法截图上传？
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="main-content" :class="{ 'has-files': files.length > 0 }">
                <div class="upload-section">
                    <div class="upload-area" 
                         @click="triggerFileInput"
                         @dragover.prevent="handleDragOver"
                         @dragleave.prevent="handleDragLeave"
                         @drop.prevent="handleDrop"
                         :class="{ dragover: isDragOver, active: isPasteActive }">
                        <div class="upload-icon">📁</div>
                        <div class="upload-text">点击、拖拽或粘贴上传图片 </div>
                        <div class="upload-hint">支持 JPG、PNG、GIF、WebP 等格式 | 支持批量上传 | 支持 Ctrl+V 粘贴截图<br>单个文件最大 10MB | 建议图片尺寸不超过 4096x4096</div>
                        <div class="features-list">
                            <div class="feature-item">
                                <div class="feature-title">🔞 色情识别</div>
                                <div class="feature-desc">智能识别图像中的色情和性感内容，包含各类色情违禁、儿童裸露、女性性感、艺术品色情等18个细分标签</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-title">🔍 敏感信息识别</div>
                                <div class="feature-desc">检测图像中是否包含标志、地点、物品等敏感信息</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-title">👤 公众人物识别</div>
                                <div class="feature-desc">可识别国内外47万+公众人物，包括劣迹艺人、歌星、演员、运动员等</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-title">🚫 违禁识别</div>
                                <div class="feature-desc">识别图像中是否包含吸烟、赌博、吸毒等违禁行为和纹身等违禁品</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-title">📢 广告检测</div>
                                <div class="feature-desc">检测图片中是否包含水印、二维码、条形码、小程序码，帮助过滤各种微商广告</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-title">📝 图文审核</div>
                                <div class="feature-desc">综合应用文字识别和文本审核技术，对图像中的文字内容进行多维度审核，检测图像中的文字是否包含色情、广告等违规内容</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-title">🤢 恶心图像识别</div>
                                <div class="feature-desc">检测图像中是否包含恶心、色情、性感、暴力、血腥等内容，包含12个细分标签</div>
                            </div>
                        </div>
                        <input type="file" 
                               ref="fileInput" 
                               class="file-input"
                               accept="image/*"
                               multiple
                               @change="handleFileSelect">
                    </div>
                    
                    <div v-if="files.length > 0" class="batch-upload">
                        <div class="batch-header">
                            <div class="batch-title">批量处理 ({{ files.length }} 个文件)</div>
                            <div>
                                <button class="btn btn-primary" @click="analyzeAll" :disabled="isAnalyzing"  style="margin-right: 10px;">开始分析</button>
                                <button class="btn btn-success" @click="logoRecognition" :disabled="isAnalyzing">品牌识别</button>
                                <button class="btn btn-danger" @click="clearAll" style="margin-left: 10px;">清空</button>
                            </div>
                        </div>
                        
                        <div class="file-list">
                            <div v-for="(file, index) in files" :key="index" class="file-item">
                                <button class="remove-btn" @click="removeFile(index)">×</button>
                                <img :src="file.preview" :alt="file.name" class="file-preview">
                                <div class="file-name">{{ file.name }}</div>
                                <div class="file-size">{{ formatFileSize(file.size) }}</div>
                                <div class="file-status" :class="getStatusClass(file.status)" v-if="!isLogoRecognition">{{ getStatusText(file.status) }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <div v-if="isAnalyzing" class="loading">
                        <div class="loading-spinner"></div>
                        <div>正在分析图片内容，请稍候...</div>
                    </div>
                </div>
                
                <div v-show="showResults" class="results-wrapper">
                      <div class="results-section">
                          <div class="results-header">
                              <span v-if="!isLogoRecognition">📊</span>
                              <span v-if="isLogoRecognition">🏷️</span>
                              <span v-if="!isLogoRecognition">分析结果</span>
                              <span v-if="isLogoRecognition">LOGO识别结果</span>
                          </div>
                          
                          <div v-if="results.length === 0" class="results-placeholder">
                              <div class="placeholder-icon" v-if="!isLogoRecognition">🔍</div>
                              <div class="placeholder-icon" v-if="isLogoRecognition">🏷️</div>
                              <div class="placeholder-text" v-if="!isLogoRecognition">点击"全部分析"开始检测图片内容</div>
                              <div class="placeholder-text" v-if="isLogoRecognition">点击"品牌识别"开始识别图片中的LOGO</div>
                              <div class="placeholder-hint">分析结果将在此处显示</div>
                          </div>
                
                          <div v-for="(result, index) in results" :key="index" class="result-card">
                    <div class="result-image-container">
                        <img :src="result.preview" :alt="result.filename" class="result-image">
                    </div>
                    <div class="result-content">
                        <div class="result-info">
                             <div class="result-header-info">
                                 <h4 class="result-title">{{ result.filename }}</h4>
                             </div>
                             <div v-if="!isLogoRecognition" class="result-details">
                                 <h5>检测详情:</h5>
                                 <div class="detection-info">
                                     <div class="info-item">
                                         <span class="info-label">结果：</span>
                                         <span class="info-value" :style="{ color: getStatusColor(result.status) }">
                                             <span class="detail-icon">{{ getStatusIcon(result.status) }}</span>
                                             {{ result.message || getStatusText(result.status) }}
                                         </span>
                                     </div>
                                     <div class="info-item" v-if="result.details && result.details.length > 0" v-for="detail in result.details" :key="detail">
                                         <span class="info-label">原因：</span>
                                         <span class="info-value" :style="{ color: getStatusColor(result.status) }">
                                             <span class="detail-icon">{{ getStatusIcon(result.status) }}</span>
                                             {{ detail }}
                                         </span>
                                     </div>
                                     <div class="info-item" v-if="result.status !== 'safe' && (!result.details || result.details.length === 0)">
                                         <span class="info-label">说明：</span>
                                         <span class="info-value" :style="{ color: getStatusColor(result.status) }">
                                             <span class="detail-icon">{{ getStatusIcon(result.status) }}</span>
                                             {{ getStatusText(result.status) }}
                                         </span>
                                     </div>
                                 </div>
                             </div>
                             <div v-if="!isLogoRecognition && result.confidence" class="confidence-info">
                                 <span class="confidence-label">置信度:</span>
                                 <span class="confidence-value">{{ (result.confidence * 100).toFixed(1) }}%</span>
                             </div>
                             <div class="logo-details" v-if="isLogoRecognition && result.logoInfo">
                                 <div class="logo-brand">品牌: {{ result.logoInfo.displayName || result.logoInfo.brand }}</div>
                                 <div class="logo-actions">
                                     <button class="btn btn-primary logo-btn" @click="openPngLogo(result.logoInfo.brand)" title="搜索PNG LOGO">
                                         国外PNG
                                     </button>
                                     <button class="btn btn-info logo-btn" @click="openBaiduPng(result.logoInfo.brand)" title="百度PNG搜索">
                                         国内PNG
                                     </button>
                                     <button class="btn btn-warning logo-btn" @click="openFontSearch(result.logoInfo.brand)" title="AI创造">
                                         AI创造
                                     </button>
                                     <button class="btn btn-success logo-btn" @click="openCompanyQuery(result.logoInfo.brand)" title="企业查询">
                                         企业查询
                                     </button>
                                 </div>
                                 <div v-if="result.logoInfo.confidence !== undefined && result.logoInfo.confidence !== null" class="confidence-text-bar" style="margin-top: 8px;">
                                     <span class="detail-icon" style="color: #3498db;">
                                         {{ getStatusIcon(result.status) }}
                                     </span>
                                     <span class="confidence-text confidence-red">
                                         置信度: {{ (result.logoInfo.confidence * 100).toFixed(1) }}%
                                     </span>
                                 </div>
                             </div>
                             <div class="logo-no-result" v-if="isLogoRecognition && !result.logoInfo">
                                 <div class="no-logo-message">
                                     <span class="detail-icon" style="color: #e74c3c;">❌</span>
                                     <span class="no-logo-text">{{ result.message || '未检测到LOGO' }}</span>
                                 </div>
                                 <div class="no-logo-hint">建议：尝试上传更清晰的图片或调整图片角度</div>
                             </div>
                         </div>
                    </div>
                </div>
                
                <div class="stats" v-if="!isLogoRecognition">
                    <div class="stat-card">
                        <div class="stat-number">{{ getStatCount('safe') }}</div>
                        <div class="stat-label">安全</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">{{ getStatCount('warning') }}</div>
                        <div class="stat-label">警告</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">{{ getStatCount('unsafe') }}</div>
                        <div class="stat-label">违规</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">{{ results.length }}</div>
                        <div class="stat-label">总计</div>
                    </div>
                </div>
                
                <div class="stats" v-if="isLogoRecognition">
                    <div class="stat-card">
                        <div class="stat-number">{{ getStatCount('logo_detected') }}</div>
                        <div class="stat-label">检测到LOGO</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">{{ getStatCount('no_logo') }}</div>
                        <div class="stat-label">未检测到</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">{{ results.length }}</div>
                        <div class="stat-label">总计</div>
                    </div>
                </div>
                     </div>
                 </div>
             </div>
        </div>
        
        <!-- 欢迎弹窗 -->
        <div v-if="showWelcomeModal" class="modal-overlay" @click="closeWelcomeModal">
            <div class="modal-content" @click.stop>
                <div class="modal-icon">🚧</div>
                <div class="modal-title">系统提示</div>
                <div class="modal-message">
                    当前系统暂未正式开放，可以先体验！<br>
                    请等待最终通知后方可正式使用！
                </div>
                <button class="modal-btn" @click="closeWelcomeModal">我知道了</button>
            </div>
        </div>
    </div>

    <!-- 引入外部JavaScript文件 -->
    <script src="assets/js/app.js"></script>
</body>
</html>